<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="胡爱静">
    <title>卡通动漫</title>
    <link rel="stylesheet" type="" href="./css/index.css">
</head>
<body>
   <div class="all">
     <header>
        <span class="header"></span>
        <span class="wenzi"></span>
        <div class="dengs">
            <span class="deng active"></span>
            <span class="deng"></span>
            <span class="deng"></span>
            <span class="deng"></span>
        </div>
        <div class="btn">
            <span class="prev"></span>
            <span class="next"></span>
        </div>
        <div class="more">
            <i><a href="javascript:;">更多>></a></i>
        </div>
     </header>
    <ul class="big-ul">
       <li>
         <ul class="small-ul">
             <li> <a href=""><img src="./img/01.jpg" alt=""></a>
                   <p>火影忍者</p>
                  <span>播放：28,27,6</span>
             </li>
             <li> <a href=""><img src="./img/01.jpg" alt=""></a>
                   <p>火影忍者</p>
                   <span>播放：28,27,6</span>
             </li>
             <li> <a href=""><img src="./img/01.jpg" alt=""> </a>
                   <p>火影忍者</p>
                  <span>播放：28,27,6</span>
             </li>
             <li> <a href=""><img src="./img/01.jpg" alt=""></a>
                   <p>火影忍者</p>
                   <span>播放：28,27,6</span>
             </li>
        </ul>  
       </li>
       <li>
         <ul class="small-ul">
             <li> <a href=""><img src="./img/02.jpg" alt=""></a>
                   <p>火影忍者</p>
                  <span>播放：28,27,6</span>
             </li>
             <li> <a href=""><img src="./img/02.jpg" alt=""></a>
                   <p>火影忍者</p>
                   <span>播放：28,27,6</span>
             </li>
             <li> <a href=""><img src="./img/02.jpg" alt=""> </a>
                   <p>火影忍者</p>
                  <span>播放：28,27,6</span>
             </li>
             <li> <a href=""><img src="./img/02.jpg" alt=""></a>
                   <p>火影忍者</p>
                   <span>播放：28,27,6</span>
             </li>
        </ul>  
       </li>
       <li>
         <ul class="small-ul">
             <li> <a href=""><img src="./img/03.jpg" alt=""></a>
                   <p>火影忍者</p>
                  <span>播放：28,27,6</span>
             </li>
             <li> <a href=""><img src="./img/03.jpg" alt=""></a>
                   <p>火影忍者</p>
                   <span>播放：28,27,6</span>
             </li>
             <li> <a href=""><img src="./img/03.jpg" alt=""> </a>
                   <p>火影忍者</p>
                  <span>播放：28,27,6</span>
             </li>
             <li> <a href=""><img src="./img/03.jpg" alt=""></a>
                   <p>火影忍者</p>
                   <span>播放：28,27,6</span>
             </li>
        </ul>  
       </li>
       <li>
         <ul class="small-ul">
             <li> <a href=""><img src="./img/04.jpg" alt=""></a>
                   <p>火影忍者</p>
                  <span>播放：28,27,6</span>
             </li>
             <li> <a href=""><img src="./img/04.jpg" alt=""></a>
                   <p>火影忍者</p>
                   <span>播放：28,27,6</span>
             </li>
             <li> <a href=""><img src="./img/04.jpg" alt=""> </a>
                   <p>火影忍者</p>
                  <span>播放：28,27,6</span>
             </li>
             <li> <a href=""><img src="./img/04.jpg" alt=""></a>
                   <p>火影忍者</p>
                   <span>播放：28,27,6</span>
             </li>
        </ul>  
       </li>    
    </ul>
   </div>
  
  <script src="jquery.js"></script>
</body>
</html>
<script>
 var index = 0;
 function shows(){
     $('.big-ul').stop().animate({left:-593*index});
     $('.dengs .deng').eq(index).addClass('active').siblings().removeClass('active');
 }
 function prevs(){
     index = index == 0 ? 3 : index - 1;
     shows();
 }
 function nexts(){
     index = index == 3 ? 0 : index + 1;
     shows();
 }
 $('.prev').click(function(){
      prevs();
 }); 
$('.next').click(function(){
      nexts();
 }); 






</script>
